<template>
  <div class="send_a">
    <div class="senda_top">
      <div class="send-header">
        <nav-bar title="选择话题" left-text="取消" @click-left="onClickLeft" />
      </div>
      <Search
        class="topic_search"
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
      />
    </div>
    <tabs v-model:active="active">
      <tab v-for="index in 8" :title="'标签 ' + index"
        ><div class="shop">
          <ul>
            <li v-for="item in 10" class="shop_lis">
              <i class="topic-icon">#</i>
              <div class="shop_li">
                <p>夏朵花园（复兴西路店）</p>
                <span>淮海路 韩式料理</span>
              </div>
            </li>
          </ul>
        </div></tab
      >
    </tabs>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import {
  NavBar,
  Uploader,
  Cell,
  CellGroup,
  Icon,
  Search,
  Tab,
  Tabs,
} from "vant";
// import useApp from "../global/app"; //引入全局状态数据
// const appData = useApp(); //使用
// const city = appData.selectedcity;
const onClickLeft = () => history.back();
const fileList = ref([]);
const value = ref(""); //搜索框
</script>
<style scoped>
html {
  font-size: 13.3vw;
}
body {
  font-size: 0.2rem;
}
.send_a {
  width: 94%;
  margin: 0 auto;
  /* position: relative; */
  display: flex;
  flex-direction: column;
}
.shop_lis {
  height: 3.6rem;
  border-top: 1px solid #c3c1c1;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0.6rem 0;
}
.topic-icon {
  color: #ff6937;
  line-height: 1.6rem;
  font-size: 1.2rem;
  margin-right: 0.6rem;
}
.shop_li {
  flex: 1;
  font-size: 0.6rem;
  color: #807e7e;
}
.shop_li p {
  font-weight: bold;
  line-height: 1.4rem;
  color: black;
  font-size: 0.8rem;
}
</style>
<style>
.topic_search {
  height: 1.6rem;
  font-size: 0.6rem;
}
</style>
